@let focusedItemIndex = focusedItemIndex$ | async;

<div class="input-group p-2">
  <span class="input-group-text">
    <app-svg icon="command_palette"></app-svg>
  </span>

  <input
    type="text"
    class="form-control"
    [appFocusOnEvent]="focusableInputs.DATABUCKET_NAME"
    [formControl]="searchControl"
    (keydown.enter)="onCommandActivate($event)"
  />
</div>
<div
  class="list-group list-group-flush overflow-y-scroll command-list"
  role="listbox"
>
  @defer {
    @let commands = commands$ | async;

    @for (command of commands; track command.id; let commandIndex = $index) {
      <button
        #commandElement
        role="option"
        id="{{ command.id }}"
        type="button"
        class="list-group-item list-group-item-action py-2 d-flex"
        [ngClass]="{ active: commandIndex === focusedItemIndex }"
        (click)="onCommandActivate($event, command)"
      >
        <span [innerHTML]="command.labelDelimited || command.label"></span>
        @if (!isWeb) {
          <span class="ms-auto" [innerHTML]="command.shortcut$ | async"></span>
        }
      </button>
    } @empty {
      <div class="list-group-item message message-md">No matching results</div>
    }
  } @placeholder {
    <div class="list-group-item message message-md">
      <app-spinner size="20"></app-spinner>
    </div>
  }
</div>
